<template>
  <div class="zw-header">
    <div class="left-box">
      <img src="@/assets/imgs/logo/keyida_logo.png" class="logo-box" />
    </div>

    <div class="right-box">
      <div class="user-info"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, reactive, ref } from 'vue'
  import { ElInput, ElBadge, ElMessage } from 'element-plus'
  import { Search, Share } from '@element-plus/icons-vue'
  import { useStore } from '@/store'
  import router from '@/router'

  const store = useStore()

  const state = reactive({})

  const onCommandUser = async (val: any) => {
    if (val === 'logOut') {
      await store.dispatch('user/logout')
      window.location.href = '/login'
    } else {
      router.push(val.router)
    }
  }
</script>

<style lang="scss" scoped>
  .zw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    background: #ff6b00;

    .left-box {
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: 20px;

      .logo-box {
        width: 90px;
        height: auto;
        margin-right: 10px;
        cursor: pointer;
      }
    }

    .right-box {
      display: flex;
      align-items: center;
      margin-right: 20px;

      .user-info {
        color: #fff;
      }
    }
  }
</style>
